<template>
  <div>
        <el-table :show-header="false"
            highlight-current-row
            @current-change="handleCurrentChange"
            :data="data">
          <el-table-column label="名字" align="left" prop="name" />
        </el-table>
        <!-- <el-button type="primary" style="float: right; margin-bottom: 5px;" size="mini" plain>增加指标</el-button> -->
        <el-table :data="itemList" height="400"
        row-key="id" default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column label="编号" align="left" prop="itemNo" width="120"/>
          <el-table-column label="检查项目" align="left" prop="name" width="160"/>
          <el-table-column label="检查要点" align="left" prop="spec" />
          <el-table-column label="操作" align="center"  width="60">
            <template slot-scope="scope">
                <el-button
                    v-if="scope.row.status == 0"
                    style="text-decoration: underline;"
                    size="mini"
                    type="text"
                    @click="handleDelete(scope.row)"
                >移除</el-button>
                <el-button
                    v-if="scope.row.status == 1"
                    style="text-decoration: underline;"
                    size="mini"
                    type="text"
                    @click="handleRevert(scope.row)"
                >恢复</el-button>
            </template>
          </el-table-column>
        </el-table>
  </div>
</template>

<script>
import { listItem, updateItemStatus } from "@/api/labsafety/labsafetyCheckRefIndexItem";
export default {
  name: "TargetItem",
  props: {
    data: Array,
    instanceId: Number
  },
  data() {
    return {
      total: 0,
      currentRow: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        indexId: null,
        instanceId: null
      },
      itemList: []
    };
  },
  watch: {
  },
  created() {
  },
  methods: {
    statusFormatter(row, column) {
      if (row.status == 1) {
        return '已移除'
      }
      return '正常'
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      this.getList()
    },
    getList() {
     // console.log('this.currentRow='+JSON.stringify(this.currentRow));
      if(this.currentRow==null || !this.currentRow){
        return;
      }
      const indexId = this.currentRow.id
      listItem({indexId: indexId, instanceId: this.instanceId}).then(response => {
        this.itemList = this.handleTree(response.rows, "indexItemId");
        this.total = response.total
        this.queryParams.indexId = indexId
        this.queryParams.instanceId = this.instanceId
      })
    },
    handleDelete(row) {
      const data = {
        id: row.id,
        status: 1
      }
      updateItemStatus(data).then(response => {
        this.getList()
      })
    },
    handleRevert(row) {
      const data = {
        id: row.id,
        status: 0
      }
      updateItemStatus(data).then(response => {
        this.getList()
      })
    }
  }
};
</script>

<style scoped lang="scss">
/* 去掉中间数据的分割线 */
/deep/ .el-table__row > td {
  border: none;
}
/* 去掉上面的线 */
/* .el-table th.is-leaf{
        border: none;
    } */
/* 去掉最下面的那一条线 */
/deep/ .el-table::before {
  height: 0px;
}
/deep/ .el-table .cell {
  line-height: 23px;
}
</style>
